import {
  ref,
  reactive,
  watch,
  watchEffect,
  type FunctionalComponent as FC,
} from 'vue';
import AnnoTable from './annoTable';
import Dialog from '@/components/dialog/index.vue';
import SeriesTable from './seriesTable';
import SecondAlert from './secondAlert';
import type { SelectOptionData } from '@arco-design/web-vue';
import type {
  ProjectDetailStateForm,
  ViewBasicSetting,
  ViewAnnoSetting,
  ViewDataSetting,
  ViewAnnoUserSetting,
  SeriesDataItem,
} from '@/store/modules/projectDetail/type';
import * as ApiTypes from '@/api/project/project.d';
import '../styles/stepForm.less';
import _ from 'lodash';

interface Prop {
  id: string;
  layout: string;
  status: string;
  type: 'create' | 'update';
  disabled: boolean;
  form: { basicSetting: ViewBasicSetting; annoSetting: ViewAnnoSetting };
  commonList: ApiTypes.CommonConfigResponse;
  compTotal: number;
  compList: ApiTypes.CompConfigItem[];
  toolList: ApiTypes.ToolConfigItem[];
  lesionList: ApiTypes.LesionConfigItem[];
  watchFormData: Function;
  getFormLeisonDataList: Function;
  clearLesionList: Function;
  getCompData: Function;
  getCompDialog: Function;
  sortAlertTableData: Function;
  clearAlertTableData: Function;
  setSelectCheckAll: Function;
  clearSelectCheckAll: Function;
  delCompAlertData: Function;
  delLesionData: Function;
  changeBizType: Function;
}
interface CheckItem {
  [x: number]: {
    indeterminate: boolean;
    checked: boolean;
    page: number;
  };
}
const defaultWindow = ref(false);
const visible = ref(false);
const functionExecuted = ref(false);
const current = ref(1);
const checkArr = ref({});
const secondVisible = ref(false);
const secondCurrentData = ref({} as SeriesDataItem);
const seriesList_bak = {data:[]}//整体病症组件的弹框备用数据


const AnnoItem: FC<Prop, any> = (props, ctx) => {
  const fieldNames = { label: 'name', children: 'childs' };
  // 计算全选个数
  const getCheckAllList = () => {
    const checkAllNum = Math.ceil(props.compTotal / 10);
    for (let index = 1; index <= checkAllNum; index++) {
      checkArr.value[index] = {
        indeterminate: false,
        checked: false,
        page: index,
      };
    }
  };
  if (!functionExecuted.value) {
    getCheckAllList();
    functionExecuted.value = true;
  }
  // 已添加弹窗按钮点击
  const handleClick = (props) => {
    visible.value = true;
    //备份一个
    seriesList_bak.data = _.cloneDeep(props.form.annoSetting.seriesDataList)
  };
  // 已添加弹窗关闭
  const handleUpdateVisible = (callback) => {
    //保存和取消的逻辑
    if(callback.status === 'save'){
      //nothing, because data has been saved
    }else if(callback.status === 'clear') {
      props.form.annoSetting.seriesDataList = seriesList_bak.data//恢复
    }
    visible.value = false;
  };
  // 下拉分页操作
  const handlePageChange = (page: number) => {
    current.value = page;
    props.getCompData(page);
  };
  // 下拉全选操作
  const handleChange = (
    value: boolean,
    item: { indeterminate: boolean; checked: boolean; page: number }
  ) => {
    item.indeterminate = false;
    item.checked = value;
    value && props.setSelectCheckAll(true);
    !value && props.clearSelectCheckAll(true);
  };
  // 下拉选项操作
  const handleSelectChange = async (values: number[]) => {
    if (values.length !== 0) {
      props.getCompDialog(props.form.annoSetting.seriesFcList, true);
    } else {
      props.form.annoSetting.seriesDataList = [];
    }
  };
  // 获取标签名称
  const getLabelData = (data: SelectOptionData) => {
    const label = props.form.annoSetting.seriesDataList?.find(
      (item) => item && (item.id === data.value)
    );
    return label?.name;
  };
  // 查看标注字段弹窗点击
  const handleSecondClick = (data) => {
    secondCurrentData.value = data;
    secondVisible.value = true;
  };
  // 查看标注字段弹窗关闭
  const handleSecondUpdateVisible = () => {
    secondVisible.value = false;
  };
  return (
    <div class="anno-container">
      <div class="anno-title">标注设置</div>
      <div class="anno-content">
        <a-form-item
          label="标注客户端"
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 19 }}
        >
          <div class="form-flex">
            <a-form-item
              class="anno-form-item default-window"
              field="annoSetting.defaultWindow"
              hide-label
              disabled={props.disabled}
            >
              <a-checkbox v-model={defaultWindow.value}>
                设置默认窗宽窗位
              </a-checkbox>
              {defaultWindow.value && (
                <a-select
                  v-model={props.form.annoSetting.defaultWindow}
                  style={{ width: '272px', height: '32px', marginLeft: '12px' }}
                  placeholder="请选择窗宽窗位"
                >
                  {getOptions(props.commonList.windows)}
                </a-select>
              )}
            </a-form-item>
            <a-form-item
              class="anno-form-item"
              field="annoSetting.findings"
              hide-label
              disabled={props.disabled}
            >
              <a-checkbox v-model={props.form.annoSetting.findings}>
                需要展示检查所见
              </a-checkbox>
            </a-form-item>
            <a-form-item
              class="anno-form-item"
              field="annoSetting.diagnosis"
              hide-label
              disabled={props.disabled}
            >
              <a-checkbox v-model={props.form.annoSetting.diagnosis}>
                需要展示诊断所得
              </a-checkbox>
            </a-form-item>
          </div>
          <div class="form-flex">
            <a-form-item
              class={
                defaultWindow.value ? 'anno-form-item mr80' : 'anno-form-item'
              }
              field="annoSetting.showYay"
              hide-label
              disabled={props.disabled}
            >
              <a-checkbox v-model={props.form.annoSetting.showYay}>
                需要阴阳性
              </a-checkbox>
            </a-form-item>
            <a-form-item
              class="anno-form-item"
              field="annoSetting.showReport"
              hide-label
              disabled={props.disabled}
            >
              <a-checkbox v-model={props.form.annoSetting.showReport}>
                需要图文报告
              </a-checkbox>
            </a-form-item>
            <a-form-item
              class="anno-form-item"
              field=""
              hide-label
            ></a-form-item>
          </div>
        </a-form-item>
        <a-form-item
          field="annoSetting.seriesFcList"
          label="整体病症组件"
          label-col-style={{
            width: '80px',
            textAlign: 'right',
            lineHeight: '18px',
            marginLeft: '8px',
          }}
          style={{ alignItems: 'center' }}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 13 }}
          disabled={props.disabled}
        >
          <div class="series-content">
            <a-select
              v-model={props.form.annoSetting.seriesFcList}
              multiple
              allow-clear
              placeholder="请选择，可多选"
              max-tag-count={6}
              show-extra-options={false}
              onChange={handleSelectChange}
              v-slots={{
                // header: () => (
                //   <div style="padding: 6px 12px;">
                //     <a-checkbox
                //       modelValue={checkArr.value[current.value].checked}
                //       indeterminate={
                //         checkArr.value[current.value].indeterminate
                //       }
                //       onChange={(value: boolean) =>
                //         handleChange(value, checkArr.value[current.value])
                //       }
                //     >
                //       全选{checkArr.value[current.value].page}
                //     </a-checkbox>
                //   </div>
                // ),
                footer: () => (
                  <div style="padding: 6px 12px;">
                    <a-pagination
                      v-model={current.value}
                      total={props.compTotal}
                      show-total
                      size="mini"
                      onChange={handlePageChange}
                    />
                  </div>
                ),
                label: ({ data }) => <div>{getLabelData(data)}</div>,
              }}
            >
              {getOptions(changeData(props.compList))}
            </a-select>
            <a-button onClick={()=>{handleClick(props)}}>查看已添加组件</a-button>
          </div>
        </a-form-item>
        <a-form-item
          field="annoSetting.imageLayout"
          label="影像布局"
          label-col-style={{
            marginLeft: '5px',
          }}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 13 }}
          required
          disabled={props.disabled}
        >
          <a-select
            v-model={props.form.annoSetting.imageLayout}
            placeholder="请选择"
            onChange={props.clearLesionList}
          >
            {getOptions(props.commonList.imageLayouts)}
          </a-select>
        </a-form-item>
        <a-form-item
          field="annoSetting.lesionList"
          label="标注类型"
          label-col-style={{
            marginLeft: '5px',
          }}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 22 }}
          required
          disabled={props.disabled || !props.form.annoSetting.imageLayout}
        >
          <a-cascader
            fieldNames={fieldNames}
            options={props.lesionList}
            multiple
            max-tag-count={10}
            v-model={props.form.annoSetting.lesionList}
            onChange={props.getFormLeisonDataList}
          ></a-cascader>
        </a-form-item>
        {/* 病灶表格 */}
        <AnnoTable {...props} />
      </div>
      {/* 查看大征象组件弹窗 */}
      <Dialog
        title="查看已添加的标注数据"
        isForm={false}
        width={790}
        visible={visible.value}
        onUpdate:visible={handleUpdateVisible}
      >
        {{
          default: () => (
            <div class="view-dialog-body">
              <SeriesTable
                {...{
                  ...props,
                  data: props.form.annoSetting.seriesDataList,
                  flag: true,
                  handleSecondClick,
                }}
              />
            </div>
          ),
        }}
      </Dialog>
      {/* 查看标注字段弹窗 */}
      <Dialog
        title="查看标注字段"
        isForm={false}
        width={790}
        visible={secondVisible.value}
        onUpdate:visible={handleSecondUpdateVisible}
      >
        {{
          default: () => (
            <div class="view-dialog-body">
              <SecondAlert data={secondCurrentData.value} />
            </div>
          ),
        }}
      </Dialog>
    </div>
  );
};

const getOptions = (data) => {
  return data.map((item) => (
    <a-option value={item.value}>{item.name}</a-option>
  ));
};

const changeData = (data) => {
  return data.map((item) => ({ value: item.id, name: item.name }));
};

export default AnnoItem;
